<template>
  <div class="sheet-create">
    <div class="create-header">
      <h2>创建成绩单</h2>
    </div>

    <el-card class="form-card">
      <el-form :model="sheetForm" :rules="sheetRules" ref="sheetFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="考试" prop="examination">
              <el-select v-model="sheetForm.examination" placeholder="选择考试" style="width: 100%">
                <el-option
                  v-for="exam in examinations"
                  :key="exam.id"
                  :label="exam.title"
                  :value="exam.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生" prop="student">
              <el-select v-model="sheetForm.student" placeholder="选择学生" style="width: 100%">
                <el-option
                  v-for="student in students"
                  :key="student.id"
                  :label="student.name"
                  :value="student.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="sheetForm.status" placeholder="选择状态" style="width: 100%">
                <el-option label="草稿" value="draft" />
                <el-option label="已批改" value="graded" />
                <el-option label="已发布" value="published" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总分">
              <el-input-number v-model="sheetForm.totalScore" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input
            v-model="sheetForm.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="createSheet" :loading="creating">
            创建成绩单
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { gradingApi, examApi, userApi } from '@/api'

// 响应式数据
const creating = ref(false)
const sheetFormRef = ref()
const examinations = ref([])
const students = ref([])

const sheetForm = reactive({
  examination: null,
  student: null,
  status: 'draft',
  totalScore: 100,
  remarks: ''
})

const sheetRules = {
  examination: [
    { required: true, message: '请选择考试', trigger: 'change' }
  ],
  student: [
    { required: true, message: '请选择学生', trigger: 'change' }
  ]
}

// 获取考试列表
const fetchExaminations = async () => {
  try {
    const response = await examApi.getExaminations({ page_size: 1000 })
    if (response.data?.results) {
      examinations.value = response.data.results
    }
  } catch (error) {
    console.error('获取考试列表失败:', error)
    ElMessage.error('获取考试列表失败')
  }
}

// 获取学生列表
const fetchStudents = async () => {
  try {
    const response = await userApi.getUsers({ role: 'student', page_size: 1000 })
    if (response.data?.results) {
      students.value = response.data.results
    }
  } catch (error) {
    console.error('获取学生列表失败:', error)
    ElMessage.error('获取学生列表失败')
  }
}

// 创建成绩单
const createSheet = async () => {
  try {
    await sheetFormRef.value.validate()

    creating.value = true
    const response = await gradingApi.createGradeSheet(sheetForm)

    if (response.data) {
      ElMessage.success('成绩单创建成功')
      // TODO: 跳转到成绩单详情页面
    }
  } catch (error) {
    console.error('创建成绩单失败:', error)
    ElMessage.error('创建成绩单失败')
  } finally {
    creating.value = false
  }
}

// 重置表单
const resetForm = () => {
  sheetFormRef.value?.resetFields()
}

onMounted(async () => {
  await Promise.all([
    fetchExaminations(),
    fetchStudents()
  ])
})
</script>

<style scoped lang="scss">
.sheet-create {
  padding: 20px;
}

.create-header {
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
  }
}

.form-card {
  max-width: 800px;
}
</style>